<template>
  <HuPage ref="HuPage" :com-name="$options.name" :noScroll="true">
    <template #header>
      <Head :title="title" />
    </template>
    <form-textarea :formValue.sync="text" v-bind="$attrs" :size="size" rows="10" />
    <van-button class="hu-button--submit" @click="onConfirm">{{ buttonText }}</van-button>
  </HuPage>
</template>

<script>
export default {
  name: "HuPageField",
  props: {
    title: {
      type: String,
      default: "标题",
    },
    // 输入框内容
    value: {
      type: String,
      default: "",
    },
    // 按钮文字
    buttonText: {
      type: String,
      default: "确定",
    },
    size: {
      type: Number,
      default: 300,
    },
  },
  data() {
    return {
      text: "", // 输入框填写内容
    };
  },
  methods: {
    init() {
      this.text = "";
    },
    open() {
      this.init();
      this.$refs.HuPage.open();
    },
    // 确定
    onConfirm() {
      this.$emit("update:value", this.text);
      this.$emit("confirm", this.text);
      this.$refs.HuPage.close();
    },
  },
};
</script>

<style lang="less" scoped>
</style>